<template>
  <div :class="$style.paa">
    <div :class="$style.roota">
      <header :class="$style.userCenterLinkWrappera">
        <div :class="$style.userCenterLinka">
          <a :class="$style.aa">个人中心</a>
          <img :class="$style.icona" loading="lazy" alt="" src="/取消@1x.png" />
        </div>
      </header>
      <div :class="$style.rootChilda"><component :is="activeTab" /></div>
      <section :class="$style.canvasa">
        <div :class="$style.icon1a"  />
        <div :class="$style.contenta">
          <div :class="$style.profilesParenta">
            <div :class="$style.profilesa">
              <div :class="$style.verificationa">
                <button @click="activeTab = 'Modal3'" :class="$style.parentma">
                  <img
                    :class="$style.icon2a"
                    loading="lazy"
                    alt=""
                    src="/容器@1x-5.png"
                  />
                  <div :class="$style.a1a">个人资料</div>
                </button>
                <button @click="activeTab = 'GreenModal'" :class="$style.parentma">
                  <img
                    :class="$style.icon3a"
                    loading="lazy"
                    alt=""
                    src="/容器@1x-6.png"
                  />
                  <a :class="$style.a1a">实名认证</a>
                </button>
                <div :class="$style.actionsa">
                  <button @click="activeTab = 'BlueModal'" :class="$style.containera">
                    <img
                      :class="$style.icon4a"
                      loading="lazy"
                      alt=""
                      src="/容器@1x-6.png"
                    />
                    <a :class="$style.a1a">银行卡</a>
                  </button>
                  <button @click="activeTab = 'GbModal'" :class="$style.frameDiva">
                    <img
                      :class="$style.icon5a"
                      loading="lazy"
                      alt=""
                      src="/容器@1x-8.png"
                    />
                    <div :class="$style.a1a">入金</div>
                  </button>
                  <button @click="activeTab = 'RedModal'" :class="$style.parent1a">
                    <img
                      :class="$style.icon6a"
                      loading="lazy"
                      alt=""
                      src="/容器@1x-9.png"
                    />
                    <div :class="$style.a1a">出金</div>
                  </button>
                  <button @click="activeTab = 'ModalB'" :class="$style.parent2a">
                    <img
                      :class="$style.icon7a"
                      loading="lazy"
                      alt=""
                      src="/容器@1x-10.png"
                    />
                    <div :class="$style.a1a">出入金记录</div>
                  </button>
                  <button @click="activeTab = 'WhiteModal'" :class="$style.parent3a">
                    <img
                      :class="$style.icon8a"
                      loading="lazy"
                      alt=""
                      src="/容器@1x-11.png"
                    />
                    <div :class="$style.a1a">账单</div>
                  </button>
                  <button   :class="$style.parent4a">
                    <img
                      :class="$style.icon9a"
                      loading="lazy"
                      alt=""
                      src="/容器@1x-12.png"
                    />
                    <div :class="$style.a1a">模拟账户重置</div>
                  </button>
                  <button @click="activeTab = 'OrangeModal'" :class="$style.parent5a">
                    <img
                      :class="$style.icon10a"
                      loading="lazy"
                      alt=""
                      src="/容器@1x-13.png"
                    />
                    <div :class="$style.a1a">市场模式</div>
                  </button>
                  <button @click="activeTab = 'RedwModal'" :class="$style.parent6a">
                    <img
                      :class="$style.icon11a"
                      loading="lazy"
                      alt=""
                      src="/容器@1x-14.png"
                    />
                    <div :class="$style.a1a">退出登录</div>
                  </button>
                </div>
              </div>
            </div>
            <img :class="$style.icon12a" loading="lazy" alt="" src="/-11.svg" />
          </div>
        </div>
      </section>
    </div>
  </div>
  </template>
  <script>
    import { defineComponent } from "vue";
    import Modal2 from "../components/Modal2.vue";
    import BlueModal from "../components/BlueModal.vue";
    import RedModal from "../components/RedModal.vue";
    import RedwModal from "../components/RedwModal.vue";
    import RgModal1 from "../components/RgModal1.vue";
    import WhiteModal from "../components/WhiteModal.vue";
  
    import OrangeModal from "../components/OrangeModal.vue";
    import LogoutModal from "../components/LogoutModal.vue";
    import FrameSM from "../components/FrameSM.vue";
    import GbModal from "../components/GbModal.vue";
    import Modal3 from "../components/Modal3.vue";
    import GreenModal from "../components/GreenModal.vue";
    import ModalB from "../components/ModalB.vue";



    


  
    export default defineComponent({
      name: "RootView",
      components: { Modal3, ModalB, GreenModal, Modal2, BlueModal, RedModal, RedwModal, RgModal1, WhiteModal,  OrangeModal, LogoutModal, FrameSM, GbModal  },
      data() {
      return {
        isModalVisible: false,
        activeTab: "Modal3",
        
        
      };
    },
    methods: {
      showModal() {
        this.isModalVisible = true;
      },
      closeModal() {
        this.isModalVisible = false;
      },
      scrollToAnchorPoint(refName) {
            const el = this.$refs[refName]
            el.scrollIntoView({ behavior: 'smooth'})
        }
        
    }
    });

    
  </script>
  <style module>
    .aa {
      text-decoration: none;
      position: relative;
      line-height: 10.5px;
      font-weight: 300;
      color: inherit;
    }
    .icona {
      height: 12px;
      width: 12px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      min-height: 12px;
    }
    .userCenterLinka {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      max-width: 100%;
      gap: var(--gap-xl);
    }
    .userCenterLinkWrappera {
      align-self: stretch;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 0px var(--padding-mini) 0px var(--padding-smi);
      box-sizing: border-box;
      max-width: 100%;
      text-align: left;
      font-size: var(--font-size-sm-5);
      color: var(--color-dimgray-300);
      font-family: var(--font-source-han-sans-cn);
    }
    .rootChilda {
      width: 430px;
      height: 400px;
      left: 140px;
      top: 60px;
      position: absolute;
      overflow: hidden;
      flex-shrink: 0;
      
      max-width: 100%;
      
      z-index: 999;
    }
    .icon1a {
      align-self: stretch;
      position: relative;
      max-width: 100%;
      overflow: hidden;
      max-height: 100%;
      border-top: 1px solid #DCDFE6;
    }
    .icon2a {
      height: 12px;
      width: 12px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      object-fit: cover;
      min-height: 12px;
      debug_commit: bf4bc93;
    }
    .a1a {
      
      text-decoration: none;
      position: relative;
      line-height: 10.5px;
      color: inherit;
      flex-shrink: 0;
      debug_commit: bf4bc93;
      font-size: 10.50px;
      font-family: Source Han Sans CN;
      font-weight: 350;
      line-height: 10.50px;
      word-wrap: break-word;
      color: #515A6E;

    }
    .a1a:hover{
      color: var(--color-dodgerblue);
    }
    .parentma {
      background-color: var(--color-whitesmoke-500);
      overflow: hidden;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: var(--gap-xs-3);
      
      background-color: white;
    }
    button {
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
   }
    .icon3a {
      height: 12px;
      width: 12px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      object-fit: cover;
      min-height: 12px;
      debug_commit: bf4bc93;
    }
    .a2a {
      text-decoration: none;
      position: relative;
      line-height: 10.5px;
      color: inherit;
      flex-shrink: 0;
      debug_commit: bf4bc93;
    }
    .groupa {
      background-color: var(--color-whitesmoke-500);
      overflow: hidden;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: var(--gap-xs-3);
    }
    .icon4a {
      height: 12px;
      width: 12px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      object-fit: cover;
      min-height: 12px;
      debug_commit: bf4bc93;
    }
    .a3a {
      text-decoration: none;
      position: relative;
      line-height: 10.5px;
      color: inherit;
      flex-shrink: 0;
      debug_commit: bf4bc93;
    }
    .containera {
      background-color: var(--color-whitesmoke-500);
      overflow: hidden;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: var(--gap-xs-3);
    }
    .icon5a {
      height: 12px;
      width: 12px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      min-height: 12px;
      debug_commit: bf4bc93;
    }
    .diva {
      position: relative;
      line-height: 10.5px;
      flex-shrink: 0;
      debug_commit: bf4bc93;
    }
    .frameDiva {
      background-color: var(--color-whitesmoke-500);
      overflow: hidden;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: var(--gap-xs-3);
    }
    .icon6a {
      height: 12px;
      width: 12px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      min-height: 12px;
      debug_commit: bf4bc93;
    }
    .div1a {
      position: relative;
      line-height: 10.5px;
      flex-shrink: 0;
      debug_commit: bf4bc93;
    }
    .parent1a{
      background-color: var(--color-whitesmoke-500);
      overflow: hidden;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: var(--gap-xs-3);
    }
    .icon7a {
      height: 12px;
      width: 12px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      min-height: 12px;
      debug_commit: bf4bc93;
    }
    .div2a {
      position: relative;
      line-height: 10.5px;
      flex-shrink: 0;
      debug_commit: bf4bc93;
    }
    .parent2a {
      background-color: var(--color-whitesmoke-500);
      overflow: hidden;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: var(--gap-xs-3);
    }
    .icon8a {
      height: 12px;
      width: 12px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      object-fit: cover;
      min-height: 12px;
      debug_commit: bf4bc93;
    }
    .div3a {
      position: relative;
      line-height: 10.5px;
      flex-shrink: 0;
      debug_commit: bf4bc93;
    }
    .parent3a {
      background-color: var(--color-whitesmoke-500);
      overflow: hidden;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: var(--gap-xs-3);
    }
    .icon9a {
      height: 12px;
      width: 12px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      object-fit: cover;
      min-height: 12px;
      debug_commit: bf4bc93;
    }
    .div4a {
      position: relative;
      line-height: 10.5px;
      flex-shrink: 0;
      debug_commit: bf4bc93;
    }
    .parent4a {
      background-color: var(--color-whitesmoke-500);
      overflow: hidden;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: var(--gap-xs-3);
    }
    .icon10a {
      height: 12px;
      width: 12px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      object-fit: contain;
      min-height: 12px;
      debug_commit: bf4bc93;
    }
    .div5a {
      position: relative;
      line-height: 10.5px;
      flex-shrink: 0;
      debug_commit: bf4bc93;
    }
    .parent5a {
      background-color: var(--color-whitesmoke-500);
      overflow: hidden;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: var(--gap-xs-3);
    }
    .icon11a {
      height: 12px;
      width: 12px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      object-fit: cover;
      min-height: 12px;
      debug_commit: bf4bc93;
    }
    .div6a {
      position: relative;
      line-height: 10.5px;
      flex-shrink: 0;
      debug_commit: bf4bc93;
    }
    .parent6a {
      background-color: var(--color-whitesmoke-500);
      overflow: hidden;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: var(--gap-xs-3);
    }
    .actionsa {
      
      align-self: stretch;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: var(--gap-2xl-7);
    }
    .verificationa {
      align-self: stretch;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 26px;
    }
    .profilesa {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 19.8px 0px 0px;
    }
    .icon12a {
      height: 470px;
      width: 0.9px;
      position: relative;
      object-fit: contain;
      background-color: #DCDFE6;
      z-index: 999;
    }
    .profilesParenta {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 24px;
    }
    .contenta {
      width: 135.9px;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 0px var(--padding-xs);
      box-sizing: border-box;
    }
    .canvasa {
      align-self: stretch;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 1.8px;
      text-align: left;
      font-size: var(--font-size-2xs-5);
      color: var(--color-dimgray-300);
      font-family: var(--font-source-han-sans-cn);
    }
    .roota {
      width: 600px;
      
      background-color: var(--color-white);
      max-width: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 13.5px 0px var(--padding-12xs);
      box-sizing: border-box;
      gap: 15.8px;
      line-height: normal;
      letter-spacing: normal;
      position: absolute;
    }
    .paa {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background-color: #f0f0f0; /* Just for visibility, you can remove this */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  </style>
  